<template>
    <div class="container">
        <div class="flex-box-align" style="padding-bottom: 20px;border-bottom: 1px solid #f4f4f4">
            <div class="flex">开方荐药</div>
            <el-button @click="$router.back(-1)" type="primary" size="medium">返回</el-button>
        </div>

        <div class="flex-box-container">
            <ul class="medicine-info flex" v-if="showDetail">
                <li>
                    <span>姓名：</span>
                    <span v-if="name">{{name}}</span>
                    <span v-else>暂无数据</span>
                </li>

                <li class="flex-box-align">
                    <span>详情：</span>
                    <el-input v-if="listItem.detail" type="textarea" autosize :disabled="true" style="width: 200px" v-model="listItem.detail" placeholder="请输入"></el-input>
                    <span v-else>暂无数据</span>
                </li>
            </ul>
            <ul class="medicine-info flex" v-else>
                <li>
                    <span>姓名：</span>
                    <span>{{name}}</span>
                </li>

                <li class="flex-box-align">
                    <span>详情：</span>
                    <el-input type="textarea" style="width: 200px" v-model="listItem.detail" placeholder="请输入"></el-input>
                </li>
            </ul>
            <div style="margin-top: 20px" v-if="list.length">
                <el-button type="primary" @click="handleClickSave" v-if="!showDetail">保存</el-button>
                <el-button type="primary" @click="showDetail = false" v-else>编辑</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    import {parseUrlParams} from "../../util";

    export default {
        data() {
            return {
                showDetail: true,
                list: [],
                listItem: {},
                name: "",
                id: "",
                activeIndex: 0,
            }
        },
        components: {

        },
        mounted() {
            this.name = decodeURIComponent(parseUrlParams("name"))

            let params = {
                patientId: parseUrlParams("id"),
            }
            common.requestAjax(CONSTANT.URL.PATIENT.MEDICINELIST, JSON.stringify(params), {pageIndex: 1, pageSize: 10 }, (res) => {
                if (res.status == 200) {
                    this.list = res.data.bussData
                    if (this.list.length) {
                        this.listItem = this.list[0]
                        this.activeIndex = 0
                        this.id = this.listItem.id
                    }
                }
            }, null)
        },
        methods: {
            handleClickSave() {
                console.log(this.listItem.detail)
                let params = {
                    detail: this.listItem.detail,
                    patientId: parseUrlParams("id")
                }
                common.requestAjax(CONSTANT.URL.PATIENT.MEDICINEEDIT, JSON.stringify(params), {}, (res) => {
                    if (res.status == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.showDetail = true
                    }

                })
            }
        }
    }
</script>

<style lang="scss">
    .container {
        .medicine-info {
            li {
                margin-top: 20px;
            }
            li>span:nth-child(1) {
                display: inline-block;
                width: 200px;
            }
        }
    }
</style>
